Network diagrams (also called Graphs) show interconnections between a set of entities. Each entity is represented by a Node (or vertice). Connection between nodes are represented through links (or edges). Networks is an entire field of research in itself. For example, you need to set up a layout algorythm that finds out an optimal position for each node. Several type of networks exist. They can be directed (flow) or undirected (connection). Links can be wheigthed or not.
<!-- Include the CanvasXpress library in your HTML file -->
<link rel="stylesheet" href="https://www.canvasxpress.org/dist/canvasXpress.css" type="text/css"/>
<script src="https://www.canvasxpress.org/canvasXpress.min.js"></script>
<!-- Create a canvas element for the chart with the desired dimensions -->
<div>
<canvas id="canvasId" width="600" height="600"</canvas>
</div>
<!-- Create a script to initialize the chart -->
<script>
<!-- Create the data for the graph -->
var data = {
"edges" : [{"color" : "rgb(51,12,255)","id1" : "Gene1","id2" : "Gene2","type" : "line"},{"color" : "rgb(51,12,152)","id1" : "SNP1","id2" : "PH1","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene2","id2" : "Gene7","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene2","id2" : "Gene8","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene1","id2" : "Gene3","type" : "line"},{"color" : "rgb(51,12,152)","id1" : "SNP4","id2" : "PH4","type" : "line"},{"color" : "rgb(102,12,152)","id1" : "PH1","id2" : "PH1a","type" : "line"},{"color" : "rgb(102,12,152)","id1" : "PH1","id2" : "PH1b","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene4","id2" : "SNP3","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene6","id2" : "SNP4","type" : "line"},{"color" : "rgb(51,12,152)","id1" : "PH2","id2" : "PH2a","type" : "line"},{"color" : "rgb(102,12,152)","id1" : "PH2","id2" : "PH2b","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene6","id2" : "SNP5","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene7","id2" : "SNP6","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "SNP6","id2" : "SNP7","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene1","id2" : "Gene4","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene1","id2" : "Gene5","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "SNP7","id2" : "Gene6","type" : "line"},{"color" : "rgb(153,12,255)","id1" : "SNP6","id2" : "SNP8","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene3","id2" : "SNP1","type" : "line"},{"color" : "rgb(51,12,255)","id1" : "Gene3","id2" : "SNP2","type" : "line"},{"color" : "rgb(153,12,255)","id1" : "SNP2","id2" : "PH2","type" : "line"},{"color" : "rgb(51,12,152)","id1" : "SNP3","id2" : "PH3","type" : "line"},{"color" : "rgb(102,12,152)","id1" : "PH2b","id2" : "PH2ba","type" : "line"}],
"nodes" : [{"color" : "rgb(255,0,0)","id" : "Gene1","shape" : "square"},{"color" : "rgb(255,0,0)","id" : "Gene2","shape" : "square"},{"color" : "rgb(255,0,0)","id" : "Gene3","shape" : "square"},{"color" : "rgb(255,0,0)","id" : "Gene4","shape" : "square"},{"color" : "rgb(255,0,0)","id" : "Gene5","shape" : "square"},{"color" : "rgb(255,0,0)","id" : "Gene6","shape" : "square"},{"color" : "rgb(255,0,0)","id" : "Gene7","shape" : "square"},{"color" : "rgb(255,0,0)","id" : "Gene8","shape" : "square"},{"color" : "rgb(0,255,0)","id" : "SNP1","shape" : "sphere"},{"color" : "rgb(0,255,0)","id" : "SNP2","shape" : "sphere"},{"color" : "rgb(0,255,0)","id" : "SNP3","shape" : "sphere"},{"color" : "rgb(0,255,0)","id" : "SNP4","shape" : "sphere"},{"color" : "rgb(0,255,0)","id" : "SNP5","shape" : "sphere"},{"color" : "rgb(0,255,0)","id" : "SNP6","shape" : "sphere"},{"color" : "rgb(0,255,0)","id" : "SNP7","shape" : "sphere"},{"color" : "rgb(0,255,0)","id" : "SNP8","shape" : "sphere"},{"color" : "rgb(0,255,255)","id" : "PH1","shape" : "star"},{"color" : "rgb(0,255,255)","id" : "PH1a","parentNode" : "PH1","shape" : "star"},{"color" : "rgb(0,255,255)","id" : "PH1b","parentNode" : "PH1","shape" : "star"},{"color" : "rgb(0,255,255)","id" : "PH2","shape" : "star"},{"color" : "rgb(0,255,255)","id" : "PH2a","parentNode" : "PH2","shape" : "star"},{"color" : "rgb(0,255,255)","id" : "PH2b","parentNode" : "PH2","shape" : "star"},{"color" : "rgb(0,255,255)","id" : "PH2ba","parentNode" : "PH2b","shape" : "star"},{"color" : "rgb(0,255,255)","id" : "PH3","shape" : "star"},{"color" : "rgb(0,255,255)","id" : "PH4","shape" : "star"}]
}
<-- Create the configuration for the graph -->
var config = {
"graphType":"Network",
"networkLayoutType":"radial",
"nodeFontColor":"rgb(29,34,43)",
"nodeScaleFontFactor":"2",
"showAnimation":"true",
"title":"Radial Network"
}
<!-- Call the CanvasXpress function to create the graph -->
var cX = new CanvasXpress("canvasId", data, config);
</script>
library(canvasXpress)
nodes=read.table("https://www.canvasxpress.org/data/cX-networkradial-nodes.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
edges=read.table("https://www.canvasxpress.org/data/cX-networkradial-edges.txt", header=TRUE, sep="\t", quote="", fill=TRUE, check.names=FALSE, stringsAsFactors=FALSE)
canvasXpress(
nodeData=nodes,
edgeData=edges,
graphType="Network",
networkLayoutType="radial",
nodeFontColor="rgb(29,34,43)",
nodeScaleFontFactor=2,
showAnimation=TRUE,
title="Radial Network"
)
Create New Page